<template>
  <wd-popup
    custom-style="padding: 20px 24px; border-radius: 10px; overflow: hidden;"
    v-model="show"
    :close-on-click-modal="false"
  >
    <view class="privacy-content">
      <view class="privacy-title">用户隐私保护提示</view>
      <view class="privacy-text">
        在你使用【大梦创新】小程序之前，请仔细阅读
        <text class="privacy-link" @click="openPrivacyContract">《大梦创新隐私保护指引》</text>
        。如你同意《大梦创新隐私保护指引》,请点击“同意”开始使用【大梦创新】小程序。
      </view>
      <view class="privacy-button-group">
        <view class="privacy-cancel">
          <wd-button type="info" @click="refusePrivacyHandle">拒绝</wd-button>
        </view>
        <wd-button
          open-type="agreePrivacyAuthorization"
          @agreeprivacyauthorization="agreePrivacyHandle"
        >
          同意
        </wd-button>
      </view>
    </view>
  </wd-popup>
</template>
<script setup lang="ts">
const props = defineProps({
  privacy: Boolean,
})
const show = ref(false)
watch(
  () => props.privacy,
  () => {
    if (show.value !== props.privacy) {
      show.value = props.privacy
    }
  },
  { immediate: true },
)
const emits = defineEmits(['privacy-change'])
const privacyChange = (e1: boolean, e2: boolean) => emits('privacy-change', e1, e2)
const agreePrivacyHandle = () => privacyChange(false, true)
const refusePrivacyHandle = () => {
  uni.showModal({
    content:
      '如果拒绝,我们将无法获取您的信息, 包括手机号、用户头像、相册等该小程序十分重要的功能,您确定要拒绝吗?',
    success: (res) => {
      if (res.confirm) {
        privacyChange(false, false)
      }
    },
  })
}
const openPrivacyContract = () => (uni as any).openPrivacyContract({})
</script>
<style lang="scss" scoped>
.privacy-content {
  .privacy-title {
    padding-top: 10rpx;
    padding-bottom: 20rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: rgb(0 0 0 / 85%);
    text-align: center;
  }

  .privacy-text {
    font-size: 28rpx;
    line-height: 54rpx;
    color: rgb(0 0 0 / 65%);
  }

  .privacy-link {
    color: $uni-color-primary;
  }

  .privacy-button-group {
    display: flex;
    justify-content: space-around;
    padding-top: 36rpx;
  }

  .privacy-cancel {
    margin-right: 30rpx;
  }
}
</style>
